<template>
  <Navbar>
    <!-- <template v-slot:left></template> -->
    <template v-slot:center>商品详情</template>
  </Navbar>
  <van-image width="100%" :src="book.detail.cover_url" />

  <van-card
    :num="book.detail.stock"
    :price="book.detail.price"
    :desc="book.detail.description"
    :title="book.detail.title"
    style="text-align: left"
  >
    <template #tags>
      <van-tag plain type="danger">新书</van-tag>
      <van-tag plain type="danger">推荐</van-tag>
    </template>
    <template #footer>
      <van-button size="warning" @click="handleAddCart">加入购物车</van-button>
      <van-button size="danger" @click="buyGoods">立即购买</van-button>
    </template>
  </van-card>

  <van-tabs v-model:active="active">
    <van-tab title="概述">
      <div class="content" v-html="book.detail.details"></div>
    </van-tab>
    <van-tab title="热评" v-for="item in book.detail.comments" :key="item.id">
      {{ item }}
    </van-tab>
    <van-tab title="相关图书">
      <!-- 相关图书直接用公共组件 GoodsList ，首页也用到了 -->
      <GoodsList :goods="book.like_goods"></GoodsList>
    </van-tab>
  </van-tabs>
</template>

<script>
//注意这里不是useRouter，useRoute定义的route才能接收路由参数
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, reactive } from "vue";
import { useStore } from "vuex";
import { Image as VanImage, Card, Button, Tab, Tabs, Tag, Toast } from "vant";

import { getDetail } from "@/network/detail";
import Navbar from "@/components/common/navbar/NavBar.vue";
import GoodsList from "@/components/content/goods/GoodsList.vue";

import { addCart } from "@/network/cart";
export default {
  name: "Detail",
  components: {
    Navbar,
    GoodsList,
    // [Lazyload.name]: Lazyload, 图片懒加载有点问题 暂时没用
    [VanImage.name]: VanImage,
    [Card.name]: Card,
    [Button.name]: Button,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Tag.name]: Tag,
    [Toast.name]: Toast,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    // 一般传递过来的参数值不能直接拿来用，都要赋值给一个ref响应式变量
    let id = ref(0);
    id.value = route.query.id;

    //

    let active = ref(0);
    // 定义数据结构
    let book = reactive({
      detail: {},
      like_goods: [],
    });

    onMounted(() => {
      getDetail(id.value).then((res) => {
        book.detail = res.data.goods;
        book.like_goods = res.data.like_goods;
      });
    });
    // 添加购物车
    const handleAddCart = () => {
      addCart({ goods_id: book.detail.id, num: 1 }).then((res) => {
        console.log(res);
        if (res.status == "204" || res.status == "201") {
          Toast.success("添加成功");
          // 设置store中的商品数量
          store.dispatch("updateCart");
        }
      });
    };

    // 立即购买
    const buyGoods = () => {
      addCart({ goods_id: book.detail.id, num: 1 }).then((res) => {
        if (res.status == "204" || res.status == "201") {
          Toast.success("加入购物车成功");
          // 设置store中的商品数量
          store.dispatch("updateCart");
          router.push("/shopcart");
        }
      });
    };

    return {
      id,
      // toRefs在不丢失响应性的情况下将对象解构并传递出去
      book,
      active,
      handleAddCart,
      buyGoods,
    };
  },
};
</script>

<style lang='less'>
.content {
  padding: 10px;
  img {
  }
}
</style>